<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>{{ obj.name }}</div>
        <div><button @click="fn">点我修改 obj.name</button></div>
        <div>使用 obj 中的 age 属性：{{ obj.age }}</div>
        <div><button @click="fn1">点我修改 obj.age</button></div>
    </div>
</body>
<script src="./vue.min.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            obj: {
                name: 'xjj'
            }
        },
        methods: {
            fn () {
                this.obj.name = 'dpj'
            },
            fn1 () {
                // 如果直接向 data 中的成员中添加属性，这个属性是没有响应式的特点的
                // this.obj.age = 18
                // 如果我们希望动态添加属性，并且这个属性也有响应式的特点可以使用 $set
                // this.$set(obj, prop, value)
                this.$set(this.obj, 'age', 18)
            }
        }
    })
</script>
</html>